import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./achievement.module.scss";
import { $saleAchievementList } from "@/api/api";
import to from "await-to-js";
import { useStore as useUserStore } from "@/store/user";
import { useRouter } from "vue-router";
import { showDialog } from '@nutui/nutui';
import '@nutui/nutui/dist/packages/dialog/style';
import { IconFont } from '@nutui/icons-vue';
import '@nutui/icons-vue/dist/style_iconfont.css';
export default defineComponent({
  name: "achievement",
  setup() {
    const userStore = useUserStore();
    const router = useRouter();
    const refresh = ref(false);
    const infinityValue = ref(false);
    const hasMore = ref(true);
    const state = reactive({
      firstLoading: false,
      data: [],
      page: 1,
      limit: 10,
      total: 0,
    } as any);

    const now = new Date();
    const year = now.getFullYear();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    const getList = async () => {
      if (!hasMore.value) {
        return;
      }
      const [err, res]: any = await to($saleAchievementList({ page: state.page, limit: state.limit }));
      if (!err) {
        state.data = state.data.concat(res.data.data);
        state.total = res.data.total;
        state.data.length >= state.total && (hasMore.value = false);
        state.page++;
      }
      refresh.value = false;
      infinityValue.value = false;
      state.firstLoading = false;
    }
    const init = () => {
      infinityValue.value = false;
      hasMore.value = true;
      state.page = 1;
      state.data = [];
    }
    const refreshFun = () => {
      init();
      getList();
    };
    const loadMore = () => {
      getList();
    };
    onMounted(() => {
      state.firstLoading = true;
      init();
      getList();
    })
    const idNoDeal = (str: string) => {
      return `******${str.substring(str.length - 4, str.length)}`
    }
    // 退出登录
    const logout = () => {
      showDialog({
        title: '提示',
        content: "确认退出登录?",
        onOk: () => {
          userStore.logout();
          router.replace('/login');
        }
      });
    }
    const Components = () => (
      <div class={[styles["achievement"]]}>
        <div class={styles["title-content"]}>
          <div class={[styles["title_box"]]}>业绩看板</div>
          <div class={styles.logout} onClick={() => { logout() }}>退出登录</div>
        </div>
        {
          state.firstLoading ? <div class={styles.firstLoading}>
            <IconFont name="loading" size="0.6rem"></IconFont>
            <span>加载中...</span>
          </div> : <>
            <div class={[styles["head_box"]]}>
              <img class={styles["header-bg"]} src={require("@/assets/header-bg.png")} />
              <div class={styles['head_content']}>
                <div class={[styles["top_box"]]}>
                  {year + "-" + month + "-" + day}
                </div>
                <div class={[styles["body_box"]]}>{state.total}</div>
                <div class={[styles["bottom_box"]]}>累计参保人数</div>
              </div>
            </div>
            <div class={styles['table-header']}>
              <div class={styles['header-col']}>投保人姓名</div>
              <div class={styles['header-col']}>被保人姓名</div>
              <div class={styles['header-col']}>被保人证件号</div>
              <div class={styles['header-col']}>缴费时间</div>
            </div>
            <div class={styles.container}>
              <nut-infinite-loading
                v-model={infinityValue.value}
                has-more={hasMore.value}
                onLoadMore={() => loadMore()}
              >
                <nut-pull-refresh
                  v-model={refresh.value}
                  onRefresh={() => refreshFun()}
                >
                  <div class={[styles["table-box"]]}>
                    {
                      state.data.map((item) => (
                        <div class={styles["table-row"]}>
                          <div class={styles["table-col"]}>{item.applicant_name}</div>
                          <div class={styles["table-col"]}>{item.name}</div>
                          <div class={styles["table-col"]}>{idNoDeal(item.id_no)}</div>
                          <div class={[styles["table-col"], styles["pay_time"]]}>{item.pay_time}</div>
                        </div>
                      ))
                    }
                  </div>
                </nut-pull-refresh>
              </nut-infinite-loading>
            </div>
          </>
        }
      </div>
    );
    return {
      Components,
    };
  },
  render() {
    return <this.Components></this.Components>;
  },
});
